<template>
	<view class="page">
		<u-tabbar
			:value="selectIndex"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
			zIndex="999" 
			:border="false"
			inactiveColor="#666666"
			activeColor="#666666"
		>
			<u-tabbar-item text="首页" @click="gotoHoem()">
				<image
					class="job-tabbar-item-image"
					slot="active-icon"
					src="/static/job/tabbar01.png"
				></image>
				<image
					class="job-tabbar-item-image"
					slot="inactive-icon"
					src="/static/job/tabbar01.png"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="招聘" @click="gotoJob()">
				<image
					class="job-tabbar-item-image"
					slot="active-icon"
					src="/static/job/tabbar02_active.png"
				></image>
				<image
					class="job-tabbar-item-image"
					slot="inactive-icon"
					src="/static/job/tabbar02.png"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="发布" @click="show()">
				<image
					class="job-tabbar-item-release-image"
					slot="active-icon"
					src="/static/job/tabbar03.png"
				></image>
				<image
					class="job-tabbar-item-release-image"
					slot="inactive-icon"
					src="/static/job/tabbar03.png"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="人才库" @click="gotoJobResume()">
				<image
					class="job-tabbar-item-image"
					slot="active-icon"
					src="/static/job/tabbar04_active.png"
				></image>
				<image
					class="job-tabbar-item-image"
					slot="inactive-icon"
					src="/static/job/tabbar04.png"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="我的" @click="gotoJobMe()">
				<image
					class="job-tabbar-item-image"
					slot="active-icon"
					src="/static/job/tabbar05_active.png"
				></image>
				<image
					class="job-tabbar-item-image"
					slot="inactive-icon"
					src="/static/job/tabbar05.png"
				></image>
			</u-tabbar-item>
		</u-tabbar>
		<u-overlay :show="overlayIsShow" :duration="100" @click="show()" :z-index ="999" :opacity="0.5">
				
				<view class="job-tabbar-warp">
					<view class="job-tabbar-warp-title">
						认证提示
					</view>
					<view class="job-tabbar-warp-text">
						发布招聘信息必须完成认证，否则不能发布！
					</view>
					<view class="job-tabbar-warp-button">
						<view class="job-tabbar-warp-button-item" @click="gotoPostPosition()">
							<u--image src="/static/job/footer_1.png" shape="circle" width="126rpx" height="126rpx"></u--image>
							<text>招聘信息</text>
						</view>
						<view class="job-tabbar-warp-button-item" @click="gotoPostResume()">
							<u--image src="/static/job/footer_2.png" shape="circle" width="126rpx" height="126rpx"></u--image>
							<text>发布简历</text>
						</view>
						<view class="job-tabbar-warp-button-item" @click="gotoEnterPriseAuth()">
							<u--image src="/static/job/footer_3.png" shape="circle" width="126rpx" height="126rpx"></u--image>
							<text>企业认证</text>
						</view>
						<view class="job-tabbar-warp-button-item" @click="gotoPersonalAuth()">
							<u--image src="/static/job/footer_1.png" shape="circle" width="126rpx" height="126rpx"></u--image>
							<text>个人认证</text>
						</view>
					</view>
					<view class="job-tabbar-warp-close">
						<u--image src="/static/job/footet_gb.png" shape="circle" width="110rpx" height="110rpx"></u--image>
					</view>
				</view>
			</u-overlay>
	</view>
</template>

<script>
	export default {
		name:"JobTabbar",
		data() {
			return {
				overlayIsShow: false,
			};
		},
		props: {
			selectIndex: {
				type: Number,
				default: 1,
			},
		},
		methods: {
			gotoHoem() {
				uni.switchTab({
				    url: '/pages/index/index'
				});
			},
			gotoJob() {
				uni.$u.route({
					url:'pages/job/job'
				})
			},
			gotoJobResume() {
				uni.$u.route({
					url:'pages/jobResume/jobResume'
				})
			},
			gotoJobMe() {
				uni.$u.route({
					url: 'pages/jobMe/jobMe'
				})
			},
			gotoPostPosition(){
				uni.$u.route({
					url: 'pages/jopPostPosition/jopPostPosition'
				})
			},
			gotoPostResume(){
				uni.$u.route({
					url: 'pages/jobPostResume/jobPostResume'
				})
			},
			gotoEnterPriseAuth(){
				uni.$u.route({
					url: '/pages/jobMyEnterPriseAuth/jobMyEnterPriseAuth'
				})
			},
			gotoPersonalAuth(){
				uni.$u.route({
					url: '/pages/jobMyPersonalAuth/jobMyPersonalAuth'
				})
			},
			show(){
				this.overlayIsShow = !this.overlayIsShow
			}
		},
	}
</script>

<style lang="scss" scoped>
/* 底部导航开始 */
.job-tabbar-item-image {
	width: 51rpx;
	height: 51rpx;
}
.job-tabbar-item-release-image{
	width: 104rpx;
	height: 104rpx;
	margin-top: -60rpx;
	margin-bottom: 7rpx;
}

/* 底部导航结束 */

.job-tabbar-warp {
	position: absolute;
	left: 0;
	bottom: 0;
	padding-bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	width: 100%;
	height: 700rpx;
	display: flex;
	flex-direction: column;
}
.job-tabbar-warp-title {
	font-size: 40rpx;
	color: #fbf8f8;
	line-height: 40rpx;
	text-align: center;
	margin-bottom: 20rpx;
}
.job-tabbar-warp-text {
	font-size: 32rpx;
	color: #fbf8f8;
	line-height: 40rpx;
	text-align: center;
	margin-bottom: 190rpx;
}
.job-tabbar-warp-button {
	display: flex;
	flex-direction: row;
}
.job-tabbar-warp-button-item {
	width: 33.33%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.job-tabbar-warp-button-item > text {
	font-size: 32rpx;
	color: #fbf8f8;
	line-height: 40rpx;
	text-align: center;
	margin-top: 20rpx;
}
.job-tabbar-warp-close {
	margin-top: 70rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
</style>
